<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04全选和反选</title>
    <style>
        #box ul{
            list-style-type: none;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            //获取id是box的元素下面的所有input元素。
            var inputs = document.getElementById("box").getElementsByTagName("input");
            //封装公共的全选或取消按钮
            function all(flag){
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked = flag;
                }
            }
            btns[0].onclick = function(){
                all(true); //全选
            }
            btns[1].onclick = function(){
                all(false); //取消
            }
            //反选
            btns[2].onclick = function(){
                for(var i=0;i<inputs.length;i++)
                {
                    inputs[i].checked == true ?  inputs[i].checked = false : inputs[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
<div id="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
</div>
<div id="box">
    <ul>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
    </ul>
</div>
</body>
</html>